<template>
	<view class="wh-full">
		<!-- 头部组件 -->
		<use-header :fixed="headerFixed" :placeholder="headerPlaceholder" :search-tip="searchTip"
			:search-auto="searchAuto"></use-header>

		<!-- 分类 -->
		<view class="category dflex-s h-full padding-top-big">
			<!-- 左侧一级分类 -->
			<view class="h-full left">
				<scroll-view scroll-y class="h-full">
					<view v-for="item in fdatas" :key="item.id" class="item dflex-c"
						:class="{ active: item.id === cid }" @click="fSelect(item)">{{ item.title }}</view>
				</scroll-view>
			</view>

			<!-- 右侧 1二级分类 2商品列表 -->
			<scroll-view class="h-full right bg-main" scroll-with-animation scroll-y :scroll-top="top"
				:style="{ height: scrollHeight }" @scroll="onScroll">
				<!-- 右侧二级分类 -->
				<view class="dflex-s dflex-wrap-w" v-if="mode == 1">
					<view class="item padding-bottom-sm dflex dflex-flow-c" v-if="item.cid == cid"
						v-for="item in sdatas" :key="item.id" @click="togoodsclasses(item)">
						<image :lazy-load="true" :src="item.img"></image>
						<text class="tac clamp margin-top-sm">{{ item.title }}</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import { queryAllClasses } from "@/api/shopping.js";
	import {
		querySecondProductsApi,
	} from "@/api/classes.js"
	
	const _goods = 'usemall-goods'
	const _goodscategory = 'usemall-goods-category'
	export default {
		data() {
			return {
				// 1分类列表 2商品列表
				mode: 1,
				// 兼容支付宝 height 显示 bug
				scrollHeight: '100%',

				// 头部参数
				headerPlaceholder: 0,
				headerFixed: !0,
				searchAuto: !0,
				searchTip: '请输入搜索关键字',

				// 当前选中分类ID
				cid: "60812f29f61a74000134eee2",
				
				// 一级数据
				fdatas: [],
				
				// 二级数据
				sdatas: [],

				// 商品列表
				goodsDatas: [],
				
				empty: false,
				hasmore: 0,
				loadmoreType: 'nomore',
				// 商品请求数据
				reqdata: {
					rows: 20,
					page: 1
				},

				top: 0,
				scrollTop: 0,
				navHeight: 0
			};
		},
		watch: {
			goodsDatas(e) {
				// 监听数据，呈现空白页
				let empty = e.length === 0;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			this.$refs.usetop.change(e.scrollTop);
		},
		onLoad() {
			// #ifdef MP-ALIPAY
			this.scrollHeight = (this.$env.windowHeight - this.$env.sis.titleBarHeight) + 'px';
			// #endif

			this.loadData();
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.loadData(() => {
				uni.stopPullDownRefresh();
			});
		},
		methods: {
			async loadData(callback) {
				const response = await queryAllClasses().catch(()=>{}).finally(()=>{
					// uni.hideLoading();
					if (typeof callback === 'function') {
						// 数据加载完成回调函数
						callback();
					}
				});
				console.log("🚀🚀🚀🚀🚀 queryAllClasses:", response);
				if(response?.code === 200) {
					this.fdatas = response?.data?.fdatas ?? [];
					this.sdatas = response?.data?.rdatas ?? [];
					if(response?.data?.fdatas?.length > 0) this.cid = response?.data?.fdatas[0]?.id ?? "";
				}else {
					this.fdatas = [];
					this.sdatas = [];
					this.cid = "";
				}
			},
			
			totop(e) {
				this.top = e.scrollTop
				this.$nextTick(function() {
					this.top = 0
				});
			},
			// 一级分类
			fSelect(item) {
				console.log(item, "<===== item")
				this.cid = item.id;
			},
			// 切换模式 1分类模式 2商品模式
			changeMode() {
				this.mode = this.mode == 1 ? 2 : 1;
			},
			// 跳转商品详情
			togoods(item) {
				this.$api.togoods({
					id: item.id
				});
			},
			// 跳转商品列表
			togoodsclasses(item) {
				console.log(item,"<===================togoodslist")
				
				uni.navigateTo({
					url: `/pages/goods/goods-classes?cid=${item.id}`
				});
			},
			
			
			// ********************************************************
			// 加载商品数据
			async queryAllClasses () {
				uni.showLoading({
						title: '加载中...'
				});
				const response = await queryAllClasses().catch(()=>{}).finally(()=>{
					uni.hideLoading();
				});
				console.log("🚀🚀🚀🚀🚀 queryAllClasses:", response);
				if(response?.code === 200) {
					this.fdatas = response?.data?.fdatas ?? [];
					this.sdatas = response?.data?.rdatas ?? [];
					if(response?.data?.fdatas?.length > 0) this.cid = response?.data?.fdatas[0]?.id ?? "";
				}else {
					this.fdatas = [];
				}
			},
			
			
			// ********************************************************
		},
		mounted() {
			// #ifdef H5 || MP-360
			this.navHeight = 50;
			// #endif
		}
	};
</script>

<style lang="scss">
	page {
		height: 100%;
		background-color: $page-color-base;
	}

	.category {
		overflow: hidden;

		.left {
			width: 200rpx;
			background-color: $page-color-base;

			.item {
				height: 100rpx;
				color: $font-color-base;
				position: relative;

				&.active {
					color: $uni-color-primary;
					background: #fff;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						height: 36rpx;
						width: 8rpx;
						background-color: $uni-color-primary;
						opacity: 0.8;
					}
				}
			}
		}

		.right {
			flex: 1;
			overflow: hidden;
			display: block;

			.item {
				flex-shrink: 0;
				width: 33.33%;
				font-size: $font-sm + 2upx;
				color: #666;

				image {
					width: 130rpx;
					height: 130rpx;
				}
			}
		}
	}

	.goods {
		display: flex;

		.goods-left {
			image {
				width: 120rpx;
				height: 120rpx;
			}
		}

		.price-box {
			bottom: 0;
		}
	}
</style>